<div>
    <div class="modal-content ">
        <div class="modal-header">
            <h4 class="modal-title">Generate Api Token</h4>
            <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="token-from">
            <form name="cdf" [formGroup]="apiForm" class="form" novalidate>
                <div class="form-group">
                    <label class="col-form-label">Api User</label>
                    <div class="input-group">
                        <input type="text" formControlName="apiUser" name="apiUser" class="form-control"
                            placeholder="Api User" autocomplete="off"
                            [ngClass]="{ 'is-invalid': f.apiUser.touched && f.apiUser.errors }" />
                        <div *ngIf="f.apiUser.touched && f.apiUser.errors" class="invalid-feedback">
                            <div *ngIf="f.apiUser.errors.required">Api user name is required</div>
                            <div *ngIf="f.apiUser.errors.minlength">Min length of 6 characters</div>
                            <div *ngIf="f.apiUser.errors.maxlength">Max length of 50 characters</div>
                            <div *ngIf="f.apiUser.errors.pattern">Special character(s) found. Please enter only letters,
                                numbers or spaces.
                            </div>
                        </div>
                    </div>
                    <div *ngIf="apiTokenError==true" class="error">
                        <div>
                            Error updating api token.
                        </div>
                    </div>

                    <br>
                    <label class="col-form-label" id="dtLabel">Expiration Date</label>

                    <div class="input-group">
                        <input type="text" name="expDt" placeholder="yyyy-mm-dd" #d="ngbDatepicker" ngbDatepicker
                            formControlName="date" />
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button"><em
                                    class="fa fa-calendar"></em></button>
                        </div>
                    </div>
                    <br />
                    <label class="col-form-label">Api Key</label>
                    <div class="input-group">
                        <input type="text" name="apiKey" class="form-control"
                            placeholder="Api Key will only be visible till this dialog box is open"
                            formControlName="apiKey" maxlength="100" autocomplete="off"
                            [ngClass]="{ 'is-invalid': f.apiKey.errors }" />
                        <div *ngIf=" f.apiKey.errors" class="invalid-feedback">
                            <div>Error generating api token</div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer text-center">
          <div class="col text-center">
            <button class="btn btn-outline-secondary mr-2" type="button" (click)="activeModal.dismiss()">Cancel</button>
            <button class="btn btn-primary" type="button" class="btn btn-primary btn-wide" (click)="submit()">Create</button>
          </div>
        </div>
    </div>
</div>
